<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(item, index) in tabsList"
        :key="index"
        :label="item.label"
        :name="item.value">
      </el-tab-pane>
      <component
        v-if="!loading"
        class="pd10"
        :is="whickComm[activeName]"
        :nowRowData="formMode"></component>
    </el-tabs>
    <PageLoading v-if="loading" />
  </div>
</template>

<script setup lang="ts">
import BaseDetail from './BaseDetail/index.vue'
import ApplyDetail from './ApplyDetail/index.vue'
import ReformDetail from './reformDetail/index.vue'
import AcceptDetail from './acceptDetail/index.vue'
import AccessDetail from './AccessDetail/index.vue'
import apiMod from '@/apiMod/index'

const whickComm = {
  BaseDetail,
  ApplyDetail,
  AccessDetail,
  ReformDetail,
  AcceptDetail
}
type Props = {
  nowRowData?: any
  api?:any
}
const props = withDefaults(defineProps<Props>(), {})
const formMode:any = ref({})
const loading = ref(false)
const tabsList = [
  { label: '基础档案', value: 'BaseDetail' },
  { label: '申请档案', value: 'ApplyDetail' },
  { label: '评估档案', value: 'AccessDetail' },
  { label: '改造档案', value: 'ReformDetail' },
  { label: '验收档案', value: 'AcceptDetail' }
]
const activeName = ref('BaseDetail')
provide('nowRowData', props.nowRowData)

const getInitData = ()=> {
  loading.value = true
  apiMod[props.api.detail](props.nowRowData.id).then(res=> {
    formMode.value = res.data||props.nowRowData
    loading.value = false
  })
}

onMounted(() => {
  getInitData()
})
</script>

<style scoped></style>
